<template>
  <div>
    <div class="section">
      <FormItem
        :required="true"
        label="您是否需要对身份保密？">
        <Radio v-model="is_secret" label="是" value="1"/>
        <Radio v-model="is_secret" label="不要求" value="0"/>
      </FormItem>

      <FormItem
        :required="true"
        label="全名">
        <Input v-model="name" placeholder="请输入会员的全名（全名或昵称至少填写一个）"/>
      </FormItem>

      <FormItem
        :required="true"
        label="昵称">
        <Input v-model="nickname" placeholder="请输入会员的昵称（全名或昵称至少填写一个）"/>
      </FormItem>

      <FormItem
        :required="level_type == 2"
        label="常用语言">
        <Checkbox v-model="lang" v-for="(text,key) in pageData.langs" :key="key" :label="text" :value="key"/>
      </FormItem>

      <FormItem
        :required="true"
        label="性别">
        <Radio v-model="contacts_gender" label="男" value="1"/>
        <Radio v-model="contacts_gender" label="女" value="2"/>
      </FormItem>

      <FormItem
        :required="level_type == 2"
        label="生日">
        <div class="fx">
          <Input class="datepicker-input flex"
            v-model="birthday.year"
            filter="int"
            :min="1920"
            :maxlength="4"
            :clean="false"
            placeholder="年"/>
          <Input class="datepicker-input flex"
            filter="int"
            :min="1"
            :max="12"
            :maxlength="2"
            :clean="false"
            v-model="birthday.month"
            placeholder="月"/>
          <Input class="datepicker-input flex"
            v-model="birthday.day"
            filter="int"
            :min="1"
            :max="31"
            :maxlength="2"
            :clean="false"
            placeholder="日"/>
    </div>
      </FormItem>

      <FormItem
        label="所属国籍">
        <Select v-model="country" :list="countryList" :value="country" placeholder="请选择国籍"/>
      </FormItem>
    </div>

    <div class="page-footer">
      <button class="btn btn-primary btn-block" :disabled="!formValid || loading" @click="submit">下一步</button>
    </div>
  </div>
</template>
<script>
import Input from '~/components/Input';
import Radio from '~/components/Radio'
import Checkbox from '~/components/Checkbox'
import FormItem from '~/components/CompleteItem'
import UploadItem from '~/components/UploadItem'
import Select from '~/components/Select'

export default {
  components:{
    Input,
    Radio,
    FormItem,
    Checkbox,
    UploadItem,
    Select
  },
  data(){
    return {

      is_secret:'',
      name:'',
      nickname:'',
      contacts_gender:'',
      lang:[],
      birthday:{},
      country:'',
      loading:false,
      step:3,
      pageData:{},
      level_type: 1,
      countryList: [],
    }
  },
  computed:{
    formValid(){
      let flag = false;
      if((String(this.name).trim() || String(this.nickname).trim()) &&
          String(this.is_secret).trim() &&
          this.contacts_gender > 0 &&
          (!(this.level_type == 2) || (String(this.birthday.month).trim() && String(this.birthday.day).trim())) &&
          (!(this.level_type == 2) || String(this.lang).trim())
        ){
        flag = true;
      }

      return flag;
    }
  },
  async mounted(){
    this.$emit('setTitle','基础资料')
    this.$store.commit('completeInfo/setStep',this.$route.name);
    await this.getCompleteInfo();

  },
  destroyed(){
    let el = document.querySelector('.page-complete-info');
    el && el.classList.remove('modal-lock-fixed');
  },
  methods:{
    countryChange (picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
    },
    async getCompleteInfo(){
      this.$emit('loading',true);
      try{
        let {data:rs} = await this.$axios.post('?ct=api&ac=get_complete_info',{
          step:this.step,
        })
        if(rs.code == 0){
          this.pageData = rs.data;
          this.level_type = this.pageData.page_data.level_type;
          let {page_data} = rs.data;
          this.countryList.push({
            flex: 1,
            values: this.pageData.countries,
            textAlign: 'center',
          })

           //初始化数据
          this.is_secret = page_data.is_secret;
          this.name = page_data.name;
          this.nickname = page_data.nickname;
          this.contacts_gender = page_data.contacts_gender
          // this.birthday = `${page_data.birthday.year}${page_data.birthday.month}${page_data.birthday.day}`
          this.birthday = toString.call(page_data.birthday) === '[object Array]' ? {year:'',month:'',day:''} : page_data.birthday;
          this.country = page_data.country
          this.lang = page_data.lang;
        }else{
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$error(e);
      }
      this.$emit('loading',false);

    },
    submit(){
      if(this.loading) return false;
      if(!this.formValid){
        this.$toast('请完善表单信息');
        return false;
      }
      this.$emit('submit',{
        step:this.step,
        is_secret:this.is_secret,
        name:this.name,
        nickname:this.nickname,
        contacts_gender:this.contacts_gender,
        member_lang:this.lang,
        birthday:this.birthday,
        country:this.country
      },()=>{
        this.$router.push({name:'complete_info-user_paper'})
      })
    },
    openPicker() {
      this.$refs.picker.open();
    },
  }
}
</script>
<style lang="less" scoped>
.page-top-tip {
  margin-bottom:40px;
  font-size:24px;
  color:#c0c3cc;
  code {
    color:#f05521;
    font-style: normal;
  }
}

/deep/ .section .com-item-box .com-item-wrap .com-item-main {
  position: static;
}

.section + .section {
  border-top: 14px solid #edeef0;
}
.birthday {
  .flex + .flex {
    margin-left:20px;
  }
}
.datepicker-input + .datepicker-input{
  margin-left:20px;
}
/deep/ .datepicker-input {
  border-bottom:1px solid #edeef0;
}
/deep/ .datepicker-input input {
  text-align: center;
}
</style>

